<template>
  <div>
      <el-select v-model="value" placeholder="请选择" style="height: 50px" clearable>
        <el-option
                v-for="item in ruleForm"
                :key="item.id"
                :label="item.name"
                :value="item.name+'/'+item.id">
        </el-option>
      </el-select>

    <el-form style="width: 60%" :model="MajorInfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="隶属学院" prop="college_id">
        <el-input v-model="value" readOnly></el-input>
      </el-form-item>
      <el-form-item label="id" prop="id">
        <el-input v-model="MajorInfo.id"></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="MajorInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="name">
        <el-input v-model="MajorInfo.px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          id: ''
        },
      MajorInfo:{
        id:'',
        name:'',
        px:'',
        college_id:'123',
        college_name:'zz'
      },

        value: [],
        rules: {
          name: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' },],
          id:[
            { required: true, message: 'id不能为空', trigger: 'blur' },
          ],
        }
      };
    },
    methods: {
      back(){
        this.$router.push("/queryCollege")
      },

      findCollegeName(){
        const _this=this
        axios.get('http://localhost:8181/college/f2').then(function (resp) {
          _this.ruleForm=resp.data
          console.log(_this.ruleForm)
        })
      },
      submitForm(formName) {
        const _this=this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.MajorInfo.college_id=this.value.split('/')[1]
            this.MajorInfo.college_name=this.value.split('/')[0]
            console.log(this.MajorInfo)
            axios.post('http://localhost:8181/college/saveMajor',this.MajorInfo).then(function(resp) {
              if (resp.data=='success'){
                _this.$alert('部门：'+_this.MajorInfo.name+'添加成功', '消息', {
                  confirmButtonText: '确定',
                  callback: action => {
                    _this.$router.push("/queryMajor")
                  }
                });
              }
            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created(){
      this.findCollegeName()
    },
  }
</script>